<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  xmlns:th="http://www.thymeleaf.org"
  lang="zh-CN"
>
<head>
  <title>经营单位</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">
    <div class="myHeader">
      <div class="myHeader-title">
        经营单位管理
      </div>
      <div class="myHeader-tool">
        <el-button type="primary"
                   size="mini"
                   v-realm="'basic-data:base-oper-company:edit'"
                   @click="_forward('/basic-data/add/admin_idc_info_add')"
        >新增
        </el-button>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="toggle">高级搜索</el-button>
      </div>
    </div>

    <el-row>
      <el-form label-width="100px" class="container-search" v-show="formShow">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item label="经营许可证号:">
              <el-input
                v-model="form.idcId"
                clearable
                show-word-limit
                maxlength="128"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.idcIdAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="经营者名称:">
              <el-input
                v-model="form.name"
                clearable
                show-word-limit
                maxlength="128"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.operNameAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="企业法人:">
              <el-input
                v-model="form.name"
                clearable
                show-word-limit
                maxlength="30"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.companyCorporationAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="更新时间:">
              <rx-range-date
                v-model="form.updateTimeRange"
                @change="arr => changeRangeDate('updateTimeStart', 'updateTimeEnd')(arr)"
              ></rx-range-date>
            </el-form-item>
          </el-col>
        </el-row>

        <div style="text-align:center; margin-bottom:20px">
          <el-button type="primary" size="medium" @click="searchPage">查 找</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" size="medium" @click="resetPage">重 置</el-button>
        </div>
      </el-form>
    </el-row>

    <!--内容-->
    <my-table
      :data="page.records"
      :columns="columns"
      @handle-selection-change="selection"
    >
      <template #idc_id="scope">
        <a
          href="#"
          @click.stop.prevent="viewInfo(scope.row)"
        >{{scope.row.idcId}}</a>
      </template>
      <template #count="scope">
        <span>
          <a href="javascript: forward('/basic-data/admin_house_info')">{{scope.row.baseHouseInfoCount}} 个机房</a><br/>
          <a
            href="javascript: forward('/monitor-log/admin_monitorip')">{{scope.row.baseMonitorDeviceCount}} 个异常</a><br/>
          <a href="javascript: forward('/basic-data/admin_user_info')">{{scope.row.baseCustomerCount}} 个用户</a><br/>
        </span>
      </template>

      <template #operating="{row}">
        <span>
          <el-button
            v-if="row.reportStatus !== 1"
            @click.stop.prevent="() => updateInfo(row)"
            v-realm="'basic-data:base-oper-company:edit'"
            type="primary"
            size="mini"
          >修改信息</el-button>
          <rx-report-data
            add="basic-data:base-oper-company:edit"
            update="basic-data:base-oper-company:edit"
            :row="row"
            @add="insertReport(row.idcId)"
            @update="updateReport(row.idcId)"
          ></rx-report-data>
        </span>
      </template>
    </my-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="changeSize"
        @current-change="goto"
        :current-page="page.current"
        :page-sizes="[10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
      <div class="pagination-tool">
        <el-button
          type="primary"
          size="mini"
          @click="showFileSelector"
          v-realm="'basic-data:base-oper-company:edit'"
        >导入
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="exportFile"
          v-realm="'basic-data:base-oper-company'"
        >导出
        </el-button>
        <el-button
          type="danger"
          size="mini"
          @click="deleteSelected"
          v-realm="'basic-data:base-oper-company:edit'"
        >删除
        </el-button>
      </div>
    </div>
    <import-excel
      title="导入经营单位信息"
      :file-selector-show="fileSelectorShow"
      template-url=""
      @download-template="downloadTemplate"
      @import-file="importFile"
      @reset-file="resetFile"
    ></import-excel>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/basic-data/model/BaseOperCompany.js"></script>
  <script src="/static/js/module/basic-data/api/baseOperCompanyApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/component/RxReportData.js"></script>
  <script src="/static/js/module/basic-data/admin_idc_info.js"></script>
</div>
</body>
</html>
